import styles from "./index.module.scss";
import router from "@/router";
import ModelViewCenter from "./components/modelViewCenter";
import ModelView from "./components/modelView";
import ModelViewDef from "./components/modelViewDef";
import ModelViewSm from "./components/modelViewSm";
import iconPr from "@/assets/public/icon-person.png";
import iconPrLight from "@/assets/public/icon-person-light.png";
import iconGwLight from "@/assets/public/icon-gw-light.png";
import iconGw from "@/assets/public/icon-gw.png";
import iconQyLight from "@/assets/public/icon-qy-light.png";
import iconQy from "@/assets/public/icon-qy.png";
import iconXl from "@/assets/public/icon-xl.png";
import iconXlLight from "@/assets/public/icon-xl-light.png";
import iconXbLight from "@/assets/public/icon-xb-light.png";
import iconGcsLight from "@/assets/public/icon-gcs-light.png";
import iconGcs from "@/assets/public/icon-gcs.png";
import iconAge from "@/assets/public/icon-age.png";
import iconAgeLight from "@/assets/public/icon-age-light.png";
import iconXb from "@/assets/public/icon-xb.png";
import iconRz from "@/assets/public/icon-rz.png";
import iconRzLight from "@/assets/public/icon-rz-light.png";
import { useSelector } from "react-redux";
import PersonInfo from "./components/personInfo";
import AreaPerson from "./components/areaPerson";
import EmployeePost from "./components/employeePost";
import EduPerson from "./components/eduPerson";
import SexPerson from "./components/sexPerson";
import Engineer from "./components/engineer";
import AgePerson from "./components/agePerson";
import EnterLeave from "./components/enterLeave";



export default function Operates() {
  const theme = useSelector((state) => state.theme);
  return (
    <div className={styles.container}>
      <ModelViewCenter
        title="人员情况"
        imgSlot={() => {
          return (
            <img
              className={theme ? styles.iconTitleLight : styles.iconTitle}
              src={theme ? iconPrLight : iconPr}
              alt="加载中..."
            />
          );
        }}
        contentSLot={PersonInfo}
        height="285"
      ></ModelViewCenter>
      <div className={styles.centerBox}>
        <div className={styles.centerBoxItem}>
          <ModelView
            title="区域在职人员"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconQyLight : iconQy}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={AreaPerson}
            height="269"
          ></ModelView>
        </div>
        <div className={styles.centerBoxItem}>
          <ModelView
            title="员工岗位"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconGwLight : iconGw}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={EmployeePost}
            height="269"
          ></ModelView>
        </div>
        <div className={styles.centerBoxItem}>
          <ModelView
            title="员工学历"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconXlLight : iconXl}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={EduPerson}
            height="269"
          ></ModelView>
        </div>
        <div className={styles.centerBoxThan}>
          <ModelViewDef
            title="男女比例"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconXbLight : iconXb}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={SexPerson}
            height="269"
          ></ModelViewDef>
        </div>
      </div>
      <div className={styles.bottomBox}>
        <div className={styles.bottomBoxItem}>
          <ModelView
            title="工程师级别"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconGcsLight : iconGcs}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={Engineer}
            height="269"
          ></ModelView>
        </div>
        <div className={styles.bottomBoxItem}>
          <ModelView
            title="员工年龄"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconAgeLight : iconAge}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={AgePerson}
            height="269"
          ></ModelView>
        </div>
        <div className={styles.bottomBoxThan}>
          <ModelViewSm
            title="入离职"
            imgSlot={() => {
              return (
                <img
                  className={theme ? styles.iconTitleLight : styles.iconTitle}
                  src={theme ? iconRzLight : iconRz}
                  alt="加载中..."
                />
              );
            }}
            contentSLot={EnterLeave}
            height="269"
          ></ModelViewSm>
        </div>
      </div>
    </div>
  );
}
